fix(avatar): snap size to backend sharp whitelist by PierreBrisorgueil · Pull Request #3973 · pierreb-devkit/Vue

PierreBrisorgueil · 2026-04-14T05:12:53Z

Bug

UserAvatarComponent calls setImages(config.api, user.avatar, size * 2, null), but the backend /api/uploads/images/ endpoint only accepts the sharp-resize whitelist ['128', '256', '512', '1024'] (devkit Node modules/uploads/config/uploads.{env}.config.js). Any other value returns HTTP 422 "Wrong size param".

Regression introduced by PR #3927 (Gravatar → UserAvatarComponent). Pre-refactor, avatars were served by gravatar.com so the backend whitelist was never hit.

Observed in production (trawl.me)

Scraps list: :size="24" → request for -48.png → 422
Account page: :size="200" → request for -400.png → 422

Every downstream project (trawl, comes, montaine, pierreb) is affected because they all consume the Devkit Vue component.

Fix

Add a computed avatarSize that snaps the requested size (this.size * 2) to the smallest allowed sharp size >= requested, capped at 1024:

const SHARP_SIZES = [128, 256, 512, 1024];
// ...
avatarSize() {
  const requested = this.size * 2;
  return SHARP_SIZES.find((s) => s >= requested) ?? SHARP_SIZES[SHARP_SIZES.length - 1];
},

The SHARP_SIZES constant carries a JSDoc pointing at the backend whitelist file so future updates stay in sync.

Tests

Added 5 unit tests covering the resolution matrix:

size=24 → 128
size=64 → 128
size=200 → 512
size=512 → 1024
size=600 → 1024 (cap)

Verify

Lint green
1008 unit tests passing, coverage 98.99% stmts / 93.68% branches (well above thresholds)
Build green

Summary by CodeRabbit

Bug Fixes
- Improved avatar sizing logic to automatically map requested sizes to supported backend dimensions, preventing API resolution errors.
Tests
- Added comprehensive test coverage for avatar sizing behavior across various input sizes.

coderabbitai · 2026-04-14T05:13:09Z

Warning

Rate limit exceeded

@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 48 minutes and 26 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 48 minutes and 26 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3e90040a-71eb-4e56-9f09-4fc4457b5732

📥 Commits

Reviewing files that changed from the base of the PR and between 7a4e07d and 92a8abb.

📒 Files selected for processing (2)

src/modules/core/components/user.avatar.component.vue
src/modules/core/tests/user.avatar.component.unit.tests.js

Walkthrough

Updated the UserAvatarComponent to snap requested avatar sizes to backend-allowed values (128, 256, 512, 1024) instead of requesting arbitrary pixel sizes that trigger 422 errors. Added a computed property avatarSize() that maps requested sizes to the nearest allowed value, with corresponding unit tests.

Changes

Cohort / File(s)	Summary
Avatar Sizing Logic `src/modules/core/components/user.avatar.component.vue`	Added constant `SHARP_SIZES` array and new `avatarSize` computed property that maps requested size * 2 to the nearest whitelisted backend size, snapping upward or capping at 1024.
Avatar Component Tests `src/modules/core/tests/user.avatar.component.unit.tests.js`	Added test suite `avatarSize computed` covering size snapping behavior with inputs mapped to allowed values (24→128, 64→128, 200→512, 512→1024, 600→1024).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

refactor(core): replace Gravatar with reusable UserAvatar component #3927: Introduced the UserAvatarComponent refactor that created the underlying issue this PR fixes (size mapping for avatar image requests).

Suggested labels

Refactor

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: snapping avatar sizes to the backend's sharp whitelist to fix the HTTP 422 error.
Description check	✅ Passed	The description comprehensively covers the bug, root cause, fix rationale, implementation, tests, and verification, exceeding template requirements.
Linked Issues check	✅ Passed	The pull request fully implements all coding requirements from issue `#3972`: snap logic, constant definition, test coverage for all specified mappings (24→128, 200→512, 600→1024), and setImages integration.
Out of Scope Changes check	✅ Passed	All changes are scoped to the avatar size snapping fix: computed property addition and corresponding unit tests with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/3972-avatar-sharp-size

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-04-14T05:14:52Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.48%. Comparing base (37eaa67) to head (92a8abb).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3973   +/-   ##
=======================================
  Coverage   99.48%   99.48%           
=======================================
  Files          30       30           
  Lines         968      968           
  Branches      267      267           
=======================================
  Hits          963      963           
  Misses          5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

Fixes UserAvatarComponent image URL generation to request only backend-whitelisted sharp resize sizes, preventing HTTP 422 errors from /api/uploads/images/ across downstream consumers.

Changes:

Added avatarSize computed that snaps size * 2 to the nearest allowed sharp size (capped at 1024).
Updated avatar image setImages(...) call to use avatarSize instead of size * 2.
Added unit tests covering the size→whitelist mapping matrix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/modules/core/components/user.avatar.component.vue	Introduces sharp-size snapping via `avatarSize` and uses it in the image URL generation.
src/modules/core/tests/user.avatar.component.unit.tests.js	Adds unit tests validating the snapping behavior for several requested sizes.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/core/tests/user.avatar.component.unit.tests.js`:
- Around line 89-115: Add an integration assertion that verifies the component's
render path calls setImages with the snapped avatar size: in the tests use
createWrapper(...) to mount the component for a representative size (e.g., size:
200), spy/mock the setImages function used by the component (via jest.spyOn or
by stubbing the imported helper), trigger a render/mount if necessary, then
assert that setImages was called and its avatarSize argument equals
wrapper.vm.avatarSize; ensure you restore the spy after the test.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 20f43747-a9e5-4328-8c08-2147eab1ea6d

📥 Commits

Reviewing files that changed from the base of the PR and between e8a3db3 and 7a4e07d.

📒 Files selected for processing (2)

src/modules/core/components/user.avatar.component.vue
src/modules/core/tests/user.avatar.component.unit.tests.js

- add JSDoc header on avatarSize computed (Copilot review) - add integration test asserting setImages receives snapped size (CodeRabbit nitpick)

fix(avatar): snap size to backend sharp whitelist (#3972)

7a4e07d

Copilot AI review requested due to automatic review settings April 14, 2026 05:12

Copilot started reviewing on behalf of PierreBrisorgueil April 14, 2026 05:13 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

Comment thread src/modules/core/components/user.avatar.component.vue

coderabbitai bot requested changes Apr 14, 2026

View reviewed changes

Comment thread src/modules/core/tests/user.avatar.component.unit.tests.js

fix(avatar): add avatarSize JSDoc and setImages integration test

92a8abb

- add JSDoc header on avatarSize computed (Copilot review) - add integration test asserting setImages receives snapped size (CodeRabbit nitpick)

coderabbitai bot approved these changes Apr 14, 2026

View reviewed changes

PierreBrisorgueil merged commit c6f59d9 into master Apr 14, 2026
6 checks passed

PierreBrisorgueil deleted the fix/3972-avatar-sharp-size branch April 14, 2026 05:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(avatar): snap size to backend sharp whitelist#3973

fix(avatar): snap size to backend sharp whitelist#3973
PierreBrisorgueil merged 2 commits intomasterfrom
fix/3972-avatar-sharp-size

PierreBrisorgueil commented Apr 14, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 14, 2026 •

edited

Loading

Rate limit exceeded

Uh oh!

codecov bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

PierreBrisorgueil commented Apr 14, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bug

Observed in production (trawl.me)

Fix

Tests

Verify

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

codecov bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PierreBrisorgueil commented Apr 14, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 14, 2026 •

edited

Loading

codecov bot commented Apr 14, 2026 •

edited

Loading